<!-- 订单 -->
<template>
  <div class="index-container">
    <div class="header-box">
      <TabsList :tabsList="tabsList" :activeItem="active" />
      <Avater></Avater>
    </div>
    <div class="order-main">
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        :immediate-check="true"
        @load="onLoad"
      >
        <div class="order-item" :key="item.id" v-for="item in dynamicData">
          <div class="order-head">
            <span class="order-num">订单编号：{{ item.orderNumber }}</span>
            <span class="order-states">{{ orderStates[item.status] }}</span>
          </div>
          <div class="order-content">{{ item.product }}</div>
          <div class="order-timer">
            <span>{{ item.orderTime }}</span>
            <div
              class="order-btn"
              @click="showOrder(item)"
              v-if="item.orderType == 5 && item.status == 1"
            >
              详情
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
  <van-popup
    v-model:show="showPup"
    position="bottom"
    round
    closeable
    :style="{ height: '40%' }"
  >
    <van-nav-bar title="订单详情" />
    <div class="steps-list">
      <van-steps :active="stepActive">
        <van-step>买家下单</van-step>
        <van-step>商家寄出</van-step>
        <van-step>订单签收</van-step>
        <van-step>交易完成</van-step>
      </van-steps>
    </div>
    <div class="steps-main">
      <van-icon color="#666" name="underway-o" size="18" /><span
        >{{ state.tipsOrder[stepActive] }}</span
      >
    </div>
  </van-popup>
</template>
<script setup>
import { computed, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import icon_hand3 from "@/assets/image/icon_hand3.png";

import { OrderList } from "@/api/index.js";
const emits = defineEmits(['goldCoinRecharge'])

const route = useRoute();

const state = reactive({
  icon_hand3,
  tabsList: [
    {
      id: 1,
      name: "我的订单",
    },
  ],
  page: 1,
  size: 8,
  total: 0,
  orderStates: {
    0: "未支付",
    1: "已支付",
    2: "已发货",
    3: "已完成",
    4: "已取消",
  },
  tipsOrder:{
    0:'等待商家寄出',
    1:'商家寄出商品',
    2:'买家已收货',
    3:'订单已完成',
  }
});

// 0-待支付 1-已支付 2-已发货 3-已完成 4-已取消

const { tabsList, orderStates } = toRefs(state);

let active = ref(1);

let loading = ref(false);
let finished = ref(false);
let dynamicData = ref([]);
const GetOrderList = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
  };
  loading.value = true;
  let { data } = await OrderList(params);
  dynamicData.value = dynamicData.value.concat(data.list);
  state.total = data.pagination.total;
  loading.value = false;
  if (dynamicData.value.length == data.pagination.total) {
    finished.value = true;
  }
};

const onLoad = () => {
  if (dynamicData.value.length < state.total && state.total != 0) {
    state.page++;
    GetOrderList();
  }
};

let showPup = ref(false);

let stepActive = ref(0);

const showOrder = (item) => {
  showPup.value = true;
};

onMounted(() => {
  GetOrderList();
});
</script>



<style lang="scss" scoped>
.header-box {
  display: flex;
}

.order-item {
  background: #fff;
  margin: 10px;
  border-radius: 8px;
  padding: 10px;
  position: relative;
  .order-btn {
    color: #1989fa;
  }
  .order-head {
    display: flex;
    justify-content: space-between;
    color: #666;
    .order-states {
      color: #999;
    }
  }
  .order-content {
    margin: 10px 0;
  }
  .order-timer {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    span {
      color: #999;
    }
  }
}
.steps-list {
  padding: 20px;
}
.steps-main {
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    margin-left: 5px;
  }
}
</style>
